<template>
 
  <div class="home">
   <Head>HEADER</Head>
    <router-view/> 
    <div class="footer">
      <router-link class="icons" :to="{name: 'newsList'}">新闻列表</router-link>
      <router-link class="icons" :to="{name: 'about'}">个人中心</router-link>        
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Head from '@/components/Head.vue'

export default {
  name: 'home',
  components: {
    Head
  }
}
</script>
<style scoped>
body {
    margin: 0;
}
  .footer {
    display: flex;
    flex-flow: row nowrap;
    position: fixed;
    width: 100%;
    height: 60px;
    line-height: 60px;
    left: 0;
    bottom: 0;
    justify-content: space-around;
    background-color: #FFF
  }

  .icons {
    font-size: 16px;
    flex: 1;
    text-align: center;
    border-top: 1px solid #42b983
  }
  a.icons {
    text-decoration: none; 
    display: block;
    color: #42b983;
  }
  a.active {
    color: #FFF;
    background: #42b983;
  }
</style>

